Skip to content

Fix architecture diagrams#238

Merged
toddgeist merged 6 commits intomainfrom
feature/fix-architecture-diagrams
May 5, 2026
Merged

Fix architecture diagrams#238
toddgeist merged 6 commits intomainfrom
feature/fix-architecture-diagrams

Conversation

@toddgeist
Copy link
Copy Markdown
Contributor

@toddgeist toddgeist commented May 5, 2026

Summary

  • Update the webviewer architecture page diagrams and connection labels.
  • Improve Mermaid rendering for multiline edge labels and diagram colors.

Test plan

  • pnpm run ci

Summary by CodeRabbit

  • Documentation
    • Updated architecture diagrams (LR→TD where appropriate), added clear connection-label callouts, removed old TODO diagrams, and revised explanatory text; clarified Node.js LTS versions (22, 24, 26) and expanded installation guidance and prerequisites.
  • New Features
    • Added a scrollable, styled workflow diagram component to replace an inline flowchart.
  • UI/Visual Improvements
    • Improved multi-line edge label sizing/centering, enhanced diagram theming, and added styling for images in prose.

Update the webviewer architecture docs and Mermaid rendering so the diagrams communicate the FileMaker integration paths clearly.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
proofkit-docs Ready Ready Preview May 5, 2026 9:23pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 5, 2026

⚠️ No Changeset found

Latest commit: 3441861

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 5, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Updates documentation visuals and guidance: post-processes Mermaid SVG edge-labels and applies theme CSS in the Mermaid renderer; adds a new SVG-based AgentWorkflowLoop component; and edits several MDX pages (webviewer architecture, AI getting-started, technical-requirements, agent-workflow, build-a-webviewer-app) plus a small global CSS tweak.

Changes

Docs visuals & workflow

Layer / File(s) Summary
Parsing / helpers
apps/docs/src/components/Mermaid.tsx
Adds regex/constants and normalizeMultilineEdgeLabels(svg: string) to locate Mermaid edge-label <g> groups and read <rect> x/width/height and text x attributes.
Core SVG post-process
apps/docs/src/components/Mermaid.tsx
When edge-labels meet multiline criteria, adjusts <rect> width/x and rewrites edge-label text/tspan x attributes to center multiline labels.
Styling / rendering wiring
apps/docs/src/components/Mermaid.tsx
Introduces mermaidStyle CSS custom properties from theme variables, expands container className selectors (adds text-fd-foreground, .edge-label_text fill, .edge stroke dasharray), and feeds normalized SVG into the renderer.
New visual component
apps/docs/src/components/AgentWorkflowLoop.tsx
Adds exported AgentWorkflowLoop and a local Node helper that render a styled SVG workflow loop with labeled nodes and arrow paths; container uses inline CSS variables.
Documentation — webviewer architecture
apps/docs/content/docs/webviewer/architecture.mdx
Changes dev Mermaid layout (flowchart LRflowchart TD), adds "Connection labels" callouts (MCP, Local API, Script calls; ProofKit type safe client, fmFetch()), updates runtime connections, and rewrites "How to think about it" to emphasize the type-safe Data API path and fmFetch/FileMaker script responsibilities.
Documentation — AI pages / Node.js guidance
apps/docs/content/docs/ai/getting-started.mdx, apps/docs/content/docs/ai/technical-requirements.mdx
Specifies Node.js LTS versions (22, 24, 26), adds installation Tabs and commands in technical requirements, and updates the summary table entry.
Documentation — agent workflow
apps/docs/content/docs/ai/agent-workflow.mdx
Replaces inline Mermaid flowchart with <AgentWorkflowLoop /> and adjusts the "What each step needs" bullet list (adds "Next change").
Docs content / scaffold & style
apps/docs/content/docs/ai/build-a-webviewer-app.mdx
Removes Callout import and expands scaffold/run/local preview/style-and-theme guidance, replacing previous prompt-shape content.
Global CSS
apps/docs/src/app/global.css
Adds @layer components rule to style .prose img with background: var(--card) and border: 1px solid var(--border).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • proofsh/proofkit#233: Modifies apps/docs/src/components/Mermaid.tsx; directly related to Mermaid rendering/DOM post-processing changes.
  • proofsh/proofkit#228: Related to architecture/data-flow diagrams and ProofKit concepts (MCP, type-safe client, fmFetch); conceptually linked to the doc updates.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Fix architecture diagrams' is directly related to the main change: updating webviewer architecture diagrams and improving Mermaid rendering.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/fix-architecture-diagrams

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/content/docs/webviewer/architecture.mdx`:
- Around line 44-45: Replace the inconsistent wording so the document uses
"type-safe" and the same fmFetch() notation everywhere: change the phrase
"ProofKit type safe client" to "ProofKit type-safe client" and ensure
occurrences of "fmFetch()" are styled/worded consistently (matching the
diagram/callout usage) — update the lines containing the "ProofKit type safe
client" text and the fmFetch() mention to use "type-safe" and the exact
"fmFetch()" token.

In `@apps/docs/src/components/Mermaid.tsx`:
- Around line 18-23: The SVG geometry mutation risks writing NaN values because
x, width, and height are derived via Number(rect.groups.*) without checks and
the height threshold uses a magic literal 40; update the code around the parsing
and guard (the block that reads const x = Number(rect.groups.x); const width =
Number(rect.groups.width); const height = Number(rect.groups.height); and the if
that returns group) to: 1) parse x/width/height and ensure each is a finite
number (use Number.isFinite) before assigning them to SVG attributes or bail
out/return the original group if any are not finite, and 2) replace the literal
40 with a new descriptive constant (e.g., MIN_SINGLE_LINE_EDGE_LABEL_HEIGHT) and
use that constant in the height comparison alongside the existing
MIN_MULTILINE_EDGE_LABEL_WIDTH check.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e183075f-aefb-440c-a2e5-8b469edff17b

📥 Commits

Reviewing files that changed from the base of the PR and between 6cacb94 and 80184d7.

📒 Files selected for processing (2)
  • apps/docs/content/docs/webviewer/architecture.mdx
  • apps/docs/src/components/Mermaid.tsx

Comment on lines +44 to +45
- **ProofKit type safe client**: Generated client code that calls FileMaker's Data API through the Execute Data API script step.
- **fmFetch()**: A lightweight script bridge for calling FileMaker scripts from the Web Viewer app.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use consistent terminology: type-safe and fmFetch() in prose.

Small docs wording cleanup for consistency with the diagram/callout terminology.

Suggested patch
-  - **ProofKit type safe client**: Generated client code that calls FileMaker's Data API through the Execute Data API script step.
+  - **ProofKit type-safe client**: Generated client code that calls FileMaker's Data API through the Execute Data API script step.
@@
-- At runtime, the deployed web app talks to FileMaker through fmFetch scripts and the type-safe Data API path.
+- At runtime, the deployed web app talks to FileMaker through `fmFetch()` scripts and the type-safe Data API path.

Also applies to: 51-51

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/content/docs/webviewer/architecture.mdx` around lines 44 - 45,
Replace the inconsistent wording so the document uses "type-safe" and the same
fmFetch() notation everywhere: change the phrase "ProofKit type safe client" to
"ProofKit type-safe client" and ensure occurrences of "fmFetch()" are
styled/worded consistently (matching the diagram/callout usage) — update the
lines containing the "ProofKit type safe client" text and the fmFetch() mention
to use "type-safe" and the exact "fmFetch()" token.

Comment on lines +18 to +23
const x = Number(rect.groups.x);
const width = Number(rect.groups.width);
const height = Number(rect.groups.height);

if (height < 40 || width >= MIN_MULTILINE_EDGE_LABEL_WIDTH) {
return group;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add finite-number guards before mutating SVG geometry, and name the height threshold constant.

If x, width, or height parses to NaN, this writes invalid values (e.g., x="NaN") into the SVG. Also, Line 22 uses a magic number (40).

Suggested patch
 const MIN_MULTILINE_EDGE_LABEL_WIDTH = 112;
+const MIN_MULTILINE_EDGE_LABEL_HEIGHT = 40;
@@
     const x = Number(rect.groups.x);
     const width = Number(rect.groups.width);
     const height = Number(rect.groups.height);
 
-    if (height < 40 || width >= MIN_MULTILINE_EDGE_LABEL_WIDTH) {
+    if (
+      !Number.isFinite(x) ||
+      !Number.isFinite(width) ||
+      !Number.isFinite(height) ||
+      height < MIN_MULTILINE_EDGE_LABEL_HEIGHT ||
+      width >= MIN_MULTILINE_EDGE_LABEL_WIDTH
+    ) {
       return group;
     }

As per coding guidelines, "Use meaningful variable names instead of magic numbers - extract constants with descriptive names".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/Mermaid.tsx` around lines 18 - 23, The SVG geometry
mutation risks writing NaN values because x, width, and height are derived via
Number(rect.groups.*) without checks and the height threshold uses a magic
literal 40; update the code around the parsing and guard (the block that reads
const x = Number(rect.groups.x); const width = Number(rect.groups.width); const
height = Number(rect.groups.height); and the if that returns group) to: 1) parse
x/width/height and ensure each is a finite number (use Number.isFinite) before
assigning them to SVG attributes or bail out/return the original group if any
are not finite, and 2) replace the literal 40 with a new descriptive constant
(e.g., MIN_SINGLE_LINE_EDGE_LABEL_HEIGHT) and use that constant in the height
comparison alongside the existing MIN_MULTILINE_EDGE_LABEL_WIDTH check.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
apps/docs/src/components/Mermaid.tsx (1)

25-30: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Still missing finite-number guards before SVG geometry mutation.

This previously flagged issue is still present: if parsing yields non-finite values, Lines 37-39 can emit invalid SVG attributes. Also, the threshold at Line 29 is still a magic number (40).

Suggested minimal patch
 const MIN_MULTILINE_EDGE_LABEL_WIDTH = 112;
+const MIN_MULTILINE_EDGE_LABEL_HEIGHT = 40;
@@
     const x = Number(rect.groups.x);
     const width = Number(rect.groups.width);
     const height = Number(rect.groups.height);
 
-    if (height < 40 || width >= MIN_MULTILINE_EDGE_LABEL_WIDTH) {
+    if (
+      !Number.isFinite(x) ||
+      !Number.isFinite(width) ||
+      !Number.isFinite(height) ||
+      height < MIN_MULTILINE_EDGE_LABEL_HEIGHT ||
+      width >= MIN_MULTILINE_EDGE_LABEL_WIDTH
+    ) {
       return group;
     }

As per coding guidelines, "Use meaningful variable names instead of magic numbers - extract constants with descriptive names".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/Mermaid.tsx` around lines 25 - 30, The code in
Mermaid.tsx currently casts rect.groups.x/width/height to Number and then uses
them to set SVG attributes; add finite-number guards (Number.isFinite) for x,
width, and height before any DOM/SVG mutation and early-return the original
group if any are not finite to avoid emitting invalid attributes; also replace
the magic literal 40 with a named constant (e.g.,
MIN_SINGLE_LINE_EDGE_LABEL_HEIGHT) and use that constant in the conditional
together with the existing MIN_MULTILINE_EDGE_LABEL_WIDTH to keep thresholds
descriptive and maintainable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@apps/docs/src/components/Mermaid.tsx`:
- Around line 25-30: The code in Mermaid.tsx currently casts
rect.groups.x/width/height to Number and then uses them to set SVG attributes;
add finite-number guards (Number.isFinite) for x, width, and height before any
DOM/SVG mutation and early-return the original group if any are not finite to
avoid emitting invalid attributes; also replace the magic literal 40 with a
named constant (e.g., MIN_SINGLE_LINE_EDGE_LABEL_HEIGHT) and use that constant
in the conditional together with the existing MIN_MULTILINE_EDGE_LABEL_WIDTH to
keep thresholds descriptive and maintainable.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 89b17b04-f905-48bd-8d44-df185c1d9cb5

📥 Commits

Reviewing files that changed from the base of the PR and between 80184d7 and d71d02b.

📒 Files selected for processing (1)
  • apps/docs/src/components/Mermaid.tsx

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 5, 2026

Open in StackBlitz

@proofkit/better-auth

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/better-auth@238

@proofkit/cli

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/cli@238

create-proofkit

pnpm add https://pkg.pr.new/proofsh/proofkit/create-proofkit@238

@proofkit/fmdapi

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/fmdapi@238

@proofkit/fmodata

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/fmodata@238

@proofkit/typegen

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/typegen@238

@proofkit/webviewer

pnpm add https://pkg.pr.new/proofsh/proofkit/@proofkit/webviewer@238

commit: 3441861

Clarify the requirements for Node.js LTS, specifying supported versions (Node.js 22 and 24) and providing detailed installation guidance for various platforms. Update the 'Technical Requirements' and 'Getting Started' sections to improve user onboarding.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/docs/content/docs/ai/technical-requirements.mdx (1)

59-61: ⚡ Quick win

Pin nvm commands to supported majors to avoid future drift.

nvm install --lts installs the latest LTS version (using the lts/* alias), which will eventually move to newer LTS majors as they are released. This can conflict with this page's explicit support matrix (Node.js 22/24).

Proposed doc tweak
-    nvm install --lts
-    nvm use --lts
+    nvm install 24
+    nvm use 24
+    # If your team standardizes on Node 22 instead:
+    # nvm install 22 && nvm use 22
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/content/docs/ai/technical-requirements.mdx` around lines 59 - 61,
The docs currently use the floating aliases "nvm install --lts" and "nvm use
--lts"; update those commands to pin to the supported major(s) to avoid future
drift (e.g., replace "nvm install --lts" and "nvm use --lts" with explicit major
pins like "nvm install 24" and "nvm use 24" or whichever majors your support
matrix requires), ensuring the commands match the Node.js 22/24 support matrix
referenced elsewhere in the doc.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/docs/content/docs/ai/technical-requirements.mdx`:
- Around line 59-61: The docs currently use the floating aliases "nvm install
--lts" and "nvm use --lts"; update those commands to pin to the supported
major(s) to avoid future drift (e.g., replace "nvm install --lts" and "nvm use
--lts" with explicit major pins like "nvm install 24" and "nvm use 24" or
whichever majors your support matrix requires), ensuring the commands match the
Node.js 22/24 support matrix referenced elsewhere in the doc.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7cbb4a86-589a-440c-81eb-9fd275e06938

📥 Commits

Reviewing files that changed from the base of the PR and between d71d02b and 189e1be.

📒 Files selected for processing (2)
  • apps/docs/content/docs/ai/getting-started.mdx
  • apps/docs/content/docs/ai/technical-requirements.mdx

Update the agent workflow documentation to utilize the new AgentWorkflowLoop component, enhancing the visual representation of the workflow. Remove the previous Mermaid diagram and related callout for a more integrated and interactive experience.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
apps/docs/src/components/AgentWorkflowLoop.tsx (2)

98-106: ⚡ Quick win

Reuse Node to remove duplicated SVG node markup.

This block duplicates rectangle/text rendering that Node already supports with multiline labels, which increases drift risk for styling/alignment.

Proposed change
-        <g>
-          <rect className={nodeClass} height="52" rx="4" width="168" x="552" y="68" />
-          <text className={textClass} textAnchor="middle" x="636" y="90">
-            <tspan x="636">Run typecheck</tspan>
-            <tspan dy="16" x="636">
-              and lint
-            </tspan>
-          </text>
-        </g>
+        <Node height={52} label={["Run typecheck", "and lint"]} width={168} x={552} y={68} />
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/AgentWorkflowLoop.tsx` around lines 98 - 106, This
block duplicates SVG markup that the existing Node component already handles;
replace the <g>...</g> rectangle/text snippet with the Node component usage to
ensure consistent styling and multiline labels. Locate the duplicated markup in
AgentWorkflowLoop.tsx (the <g> with rect using nodeClass and text using
textClass) and render <Node> (or the project's Node component) passing the same
props (class names, position x/y, width/height or equivalent) and the multiline
label "Run typecheck\nand lint" (or children/tspans as Node expects). Ensure you
remove the duplicated <g> block and verify Node receives any needed props for
alignment and accessibility so styling/alignment remain identical.

29-31: ⚡ Quick win

Make mapped <tspan> keys collision-safe.

Line 30 uses key={line}; repeated label text can produce duplicate keys and reconciliation warnings. Use a deterministic unique key per item.

Proposed change
-        {lines.map((line, index) => (
-          <tspan dy={index === 0 ? 0 : lineHeight} key={line} x={x + width / 2}>
+        {lines.map((line, index) => (
+          <tspan dy={index === 0 ? 0 : lineHeight} key={`${line}-${index}`} x={x + width / 2}>
             {line}
           </tspan>
         ))}

As per coding guidelines, "Use the key prop for elements in iterables (prefer unique IDs over array indices)".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/src/components/AgentWorkflowLoop.tsx` around lines 29 - 31, In
AgentWorkflowLoop's JSX where lines.map((line, index) => (<tspan ... key={line}
...>), replace the non-unique key={line} with a deterministic unique key (e.g.,
combine the index and the line text) so identical label text won't produce
duplicate React keys; update the key expression on the <tspan> to something like
a concatenation of index and line (e.g., `line-${index}-${line}`) to ensure
collision-safe reconciliation while keeping the mapping logic in lines.map
intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/docs/src/components/AgentWorkflowLoop.tsx`:
- Around line 98-106: This block duplicates SVG markup that the existing Node
component already handles; replace the <g>...</g> rectangle/text snippet with
the Node component usage to ensure consistent styling and multiline labels.
Locate the duplicated markup in AgentWorkflowLoop.tsx (the <g> with rect using
nodeClass and text using textClass) and render <Node> (or the project's Node
component) passing the same props (class names, position x/y, width/height or
equivalent) and the multiline label "Run typecheck\nand lint" (or
children/tspans as Node expects). Ensure you remove the duplicated <g> block and
verify Node receives any needed props for alignment and accessibility so
styling/alignment remain identical.
- Around line 29-31: In AgentWorkflowLoop's JSX where lines.map((line, index) =>
(<tspan ... key={line} ...>), replace the non-unique key={line} with a
deterministic unique key (e.g., combine the index and the line text) so
identical label text won't produce duplicate React keys; update the key
expression on the <tspan> to something like a concatenation of index and line
(e.g., `line-${index}-${line}`) to ensure collision-safe reconciliation while
keeping the mapping logic in lines.map intact.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dac3edfc-92f6-4d0c-8e5d-f36017b77dac

📥 Commits

Reviewing files that changed from the base of the PR and between 189e1be and b0d21da.

📒 Files selected for processing (2)
  • apps/docs/content/docs/ai/agent-workflow.mdx
  • apps/docs/src/components/AgentWorkflowLoop.tsx

Enhance the 'Build a Web Viewer App' guide by adding specific prompts for scaffolding and inspecting projects, as well as including new screenshots for local previews and theme presets. Update Node.js version requirements in the 'Getting Started' and 'Technical Requirements' sections to include Node.js 26. Introduce CSS styles for images in documentation.
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/content/docs/ai/build-a-webviewer-app.mdx`:
- Line 30: In the docs file build-a-webviewer-app.mdx update the user-facing
sentence that currently reads "it's preview browser" to use the possessive "its"
(i.e., change "it's preview browser" → "its preview browser"); locate the exact
string in the content and replace the contraction with the correct possessive
form so the instruction reads "ask it to use its preview browser."

In `@apps/docs/content/docs/ai/technical-requirements.mdx`:
- Around line 21-22: Update the Node.js LTS list in the bullet that currently
reads "Node.js 22, Node.js 24, or Node.js 26" to only list the actual LTS
releases (e.g., "Node.js 22 or Node.js 24") and remove Node.js 26; also update
the other occurrence around line 97 that references Node.js 26 to state that
Node.js 26 is currently "Current" and will enter LTS in October 2026 (or simply
omit it from the LTS recommendation), so the doc consistently recommends only
explicitly LTS-marked releases.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 26353e38-342b-4dd7-85cc-6b729242ba02

📥 Commits

Reviewing files that changed from the base of the PR and between b0d21da and 6e852db.

⛔ Files ignored due to path filters (2)
  • apps/docs/public/screenshots/ai/local-preview-filemaker-webviewer.png is excluded by !**/*.png
  • apps/docs/public/screenshots/ai/theme-preset-filemaker-webviewer.png is excluded by !**/*.png
📒 Files selected for processing (4)
  • apps/docs/content/docs/ai/build-a-webviewer-app.mdx
  • apps/docs/content/docs/ai/getting-started.mdx
  • apps/docs/content/docs/ai/technical-requirements.mdx
  • apps/docs/src/app/global.css

**Run the local preview.**

The agent should start the dev server and open the app in a browser so it can inspect the result.
The agent should start the dev server and open the app in a browser so it can inspect the result. Agents also have embedded browsers, so they can inspect the result without leaving the agentic loop. If the agent doesn't open a browser, ask it to use it's preview browser.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix typo in user-facing instruction.

Line 30 uses “it's preview browser”; this should be “its preview browser”.

✏️ Proposed fix
-    The agent should start the dev server and open the app in a browser so it can inspect the result. Agents also have embedded browsers, so they can inspect the result without leaving the agentic loop. If the agent doesn't open a browser, ask it to use it's preview browser.
+    The agent should start the dev server and open the app in a browser so it can inspect the result. Agents also have embedded browsers, so they can inspect the result without leaving the agentic loop. If the agent doesn't open a browser, ask it to use its preview browser.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
The agent should start the dev server and open the app in a browser so it can inspect the result. Agents also have embedded browsers, so they can inspect the result without leaving the agentic loop. If the agent doesn't open a browser, ask it to use it's preview browser.
The agent should start the dev server and open the app in a browser so it can inspect the result. Agents also have embedded browsers, so they can inspect the result without leaving the agentic loop. If the agent doesn't open a browser, ask it to use its preview browser.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/content/docs/ai/build-a-webviewer-app.mdx` at line 30, In the docs
file build-a-webviewer-app.mdx update the user-facing sentence that currently
reads "it's preview browser" to use the possessive "its" (i.e., change "it's
preview browser" → "its preview browser"); locate the exact string in the
content and replace the contraction with the correct possessive form so the
instruction reads "ask it to use its preview browser."

Comment on lines +21 to 22
- **Node.js LTS** installed locally. Choose a release that is explicitly marked LTS. Today that means **Node.js 22**, **Node.js 24**, or **Node.js 26**.
- **An MCP-compatible coding agent**, such as Cursor, Claude Code, Codex, OpenCode, or another agent that supports MCP servers.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

What major Node.js versions are currently marked "LTS" on the official Node.js releases page (https://nodejs.org/en/about/previous-releases), and what is the current status of Node.js 26?

💡 Result:

The major Node.js versions currently marked as "LTS" on the official Node.js releases page (https://nodejs.org/en/about/previous-releases) are v24 (Krypton) and v22 (Jod).[1][2][3] Node.js 26 is currently in "Current" status, released on 2026-05-05, and is scheduled to enter LTS in October 2026.[1][4][5][6]

Citations:


🏁 Script executed:

# First, find and read the file
cat -n apps/docs/content/docs/ai/technical-requirements.mdx | head -100 | tail -80

Repository: proofsh/proofkit

Length of output: 3852


Update Node.js LTS status to reflect current release timeline.

Lines 21 and 97 incorrectly identify Node.js 26 as LTS. As of May 5, 2026, only Node.js 22 and Node.js 24 are marked LTS; Node.js 26 is Current and will enter LTS in October 2026. This contradicts the guidance to choose explicitly LTS-marked releases.

Proposed fixes
-- **Node.js LTS** installed locally. Choose a release that is explicitly marked LTS. Today that means **Node.js 22**, **Node.js 24**, or **Node.js 26**.
+- **Node.js LTS** installed locally. Choose a release that is explicitly marked LTS. As of May 5, 2026, that means **Node.js 22** or **Node.js 24**. (**Node.js 26** is Current and will enter LTS in October 2026.)
@@
-| Development requirements | FileMaker Pro and Node.js 22, 24, or 26 LTS |
+| Development requirements | FileMaker Pro and Node.js 22 or 24 LTS (Node.js 26 becomes LTS in October 2026) |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/docs/content/docs/ai/technical-requirements.mdx` around lines 21 - 22,
Update the Node.js LTS list in the bullet that currently reads "Node.js 22,
Node.js 24, or Node.js 26" to only list the actual LTS releases (e.g., "Node.js
22 or Node.js 24") and remove Node.js 26; also update the other occurrence
around line 97 that references Node.js 26 to state that Node.js 26 is currently
"Current" and will enter LTS in October 2026 (or simply omit it from the LTS
recommendation), so the doc consistently recommends only explicitly LTS-marked
releases.

Enhance the 'Deploy to FileMaker' guide by adding a new section on asking the agent to deploy the app, detailing the deployment process and emphasizing the importance of running checks. Replace the TODO callout with a screenshot of a deployed ProofKit app in a FileMaker Web Viewer layout for better visual guidance.
@toddgeist toddgeist merged commit fcdf710 into main May 5, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants